﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据库管理平台</title>
    <link rel="stylesheet" href="./css/main.css">
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script src="./js/main.js"></script>
    <style>
        .padding-left {
            width: 10%;
            float: left;
            height: 100%;
        }

        .padding-right {
            width: 10%;
            float: right;
            height: 100%;
        }

        .container {
            width: calc(80% - 2px);
            float: left;
            margin-top: 100px;
            border-radius: 4px;
            text-align: center;
        }

        .box {
            width: 300px;
            height: 303px;
            border: 1px solid #666;
            float: left;
            margin: 20px 25px;
            padding-top: 10px;
            position: relative;
        }

        .box>p {
            height: 40px;
            line-height: 40px;
            text-align: left;
            padding-left: 15px;
        }

        .box>.btngroup {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 40px;
        }

        .box>.btngroup>span {
            float: left;
            height: 100%;
            width: 50%;
            border: 1px solid #888;
            border-bottom: 0;
            border-left: 0;
            display: block;
            line-height: 40px;
            text-align: center;
            cursor: pointer;
        }

        .box>.btngroup>span:last-child {
            border-right: 0;
        }

        .box>.btngroup>span:hover {
            background-color: mediumseagreen;
            color: #fff;
        }

        .hide {
            display: none;
        }

        .box input,
        .box select {
            height: 30px;
            line-height: 30px;
            border: 1px solid #ddd;
            outline: none;
            padding-left: 5px;
            width: 66%;
            float: right;
            margin-right: 27px;
            margin-top: 6px;
            font-size: 16px;
        }

        .box input:focus,
        .box select:focus {
            border-color: #4FB8FE;
        }

        .btn {
            padding: 8px 10px;
        }

        .hide {
            display: none;
        }

        .box.select {
            background: #4096dfdb;
            color: #fff;
        }

        .box.select input {
            color: #fff;
            background: rgba(0, 0, 0, 0);
        }
    </style>
</head>

<body>
    <div class="padding-left"></div>
    <div class="container">
        <div class="btn-header">
            <span id="btnStart" class="btn" onclick="startSelect()">发起比对数据库</span>
            <span id="btnCancel" class="btn" style="display: none;" onclick="cancelSelect()">取消比对</span>
        </div>
        <div class="box empty">
            <p>类型：
                <select class="info-type">
                    <option value="SqlServer">SqlServer</option>
                    <option value="MySql">MySql</option>
                </select>
            </p>
            <p>名称：<input type="text" class="info-name" value=""></p>
            <p>地址：<input type="text" class="info-addr" value=""></span></p>
            <p>数据库：<input type="text" class="info-db" value=""></span></p>
            <p>用户名：<input type="text" class="info-user" value=""></span></p>
            <p>密码: <input type="password" class="info-pwd" value=""></p>
            <div class="btngroup">
                <span class="test-connect">测试连接</span>
                <span class="save-in">保存进入</span>
            </div>
        </div>
    </div>
    <div class="padding-right"></div>
    <script>
        //0 正常, 1 选择模式
        var model = 0;
        var baseDB = "";
        var compareDB = "";
        function startSelect() {
            $("html").css("cursor", "copy");
            $("#btnCancel").show();
            model = 1;
            baseDB = "";
            compareDB = "";
        }
        function cancelSelect() {
            $("html").css("cursor", "initial");
            $("#btnCancel").hide();
            model = 0;
            baseDB = "";
            compareDB = "";
            $(".box").removeClass("select");
        }
        function startCompare() {
            top.open(`./MySqlCompare.html?guid1=${baseDB}&guid2=${compareDB}`)
        }
        function getConnectinfo(box) {
            var guid = box.find(".guid").val();
            var type = box.find(".info-type").val();
            var name = box.find(".info-name").val();
            var addr = box.find(".info-addr").val();
            var user = box.find(".info-user").val();
            var db = box.find(".info-db").val();
            var pwd = box.find(".info-pwd").val();
            var currentDb = { guid, type, name, addr, db, user, pwd };
            if ($.trim(type) == "" || $.trim(addr) == "" || $.trim(user) == "" || $.trim(db) == "" || $.trim(pwd) == "") {
                alert("信息填写不完整!");
                return false;
            }
            return currentDb;
        }
        $(function () {
            $(".container").delegate(".click-in", "click", function (evt) {
                var box = $(evt.target).parent().parent();
                var currentDb = getConnectinfo(box);
                if (!currentDb) return;
                if (currentDb.type == "MySql") {
                    window.location.href = "mysql_main.html?guid=" + currentDb.guid;
                } else if (currentDb.type == "SqlServer") {
                    window.location.href = "main.html?guid=" + currentDb.guid;
                }
            });
            $(".test-connect").click(function () {
                var box = $(".container .box").eq(0);
                var currentDb = getConnectinfo(box);
                if (!currentDb) return;
                showLoading();
                $.post("/api/manage/TestConnect", currentDb).done(res => {
                    if (res.success) {
                        alert("连接成功!")
                    } else {
                        alert(res.message);
                    }
                }).always(hideLoading);
            });
            $(".save-in").click(evt => {
                var box = $(".container .box").eq(0);
                var currentDb = getConnectinfo(box);
                if (!currentDb) return;
                showLoading();
                $.post("/api/manage/AddConnect", currentDb).done(res => {
                    if (res.success) {
                        if (currentDb.type == "SqlServer") window.location.href = "main.html?guid=" + res.data;
                        else if (currentDb.type == "MySql") window.location.href = "mysql_main.html?guid=" + res.data;
                    } else {
                        alert(res.message);
                    }
                }).always(hideLoading);
            });
            $(".container").delegate(".click-del", "click", function (evt) {
                if (!window.confirm("是否删除?")) return;
                var box = $(evt.target).parent().parent();
                var currentDb = getConnectinfo(box);
                if (!currentDb) return;
                showLoading();
                $.post("/api/manage/DeleteConnect", { guid: currentDb.guid }).done(res => {
                    if (res.success) {
                        window.location.reload();
                    } else {
                        alert(res.message);
                    }
                }).always(hideLoading);
            });
            $(".container").delegate(".box", "click", function (evt) {
                if (model == 1) {
                    var box = $(evt.currentTarget);
                    if (box.hasClass("empty")) {
                        alert("选择正确的数据库!");
                        return;
                    }
                    var type = box.find(".info-type").val();
                    if (type != "MySql") {
                        alert("仅支持Mysql!");
                        return;
                    }
                    var guid = box.find(".guid").val();
                    if (!baseDB) {
                        baseDB = guid;
                        box.addClass("select");
                    }
                    else if (!compareDB) {
                        if (guid == baseDB) {
                            alert("选择另外一个数据库!");
                            return;
                        }
                        compareDB = guid;
                        box.addClass("select");
                        startCompare();
                        setTimeout(() => {
                            cancelSelect();
                        }, 3000);
                    }
                }
            });
        });
        showLoading();
        $.get("config/connections.json?_t=" + new Date().getTime()).done((res) => {
            initConnections(res);
        }).always(hideLoading);
        function initConnections(connections) {
            var container = $(".container");
            connections.forEach(conn => {
                var box = `
        <div class="box">
            <input type="hidden" class="guid" value="${conn.Guid}" />
            <p>类型：<input type="text" class="info-type" style="border:0;" readonly value="${conn.Type}" /></p>
            <p>名称：<input type="text" class="info-name" style="border:0;" readonly value="${conn.Name}"></p>
            <p>地址：<input type="text" class="info-addr" style="border:0;" readonly value="${conn.Addr}"></p>
            <p>数据库：<input type="text" class="info-db" style="border:0;" readonly value="${conn.Db}"></p>
            <p>用户名：<input type="text" class="info-user" style="border:0;" readonly value="${conn.User}"></p>
            <p>密码: <input type="password" class="info-pwd" style="border:0;" readonly value="${conn.Pwd}"></p>
            <div class="btngroup">
                <span class="click-in">进入</span>
                <span class="click-del">删除</span>
            </div>
        </div>`;
                $(box).appendTo(container);
            });
        }
    </script>
</body>

</html>